<template>
  <div>
    <div>
      <common-form inline :form="searchForm" :formLabel="searchFormLabel" ref="searchFormRef">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchPro">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" type="success" @click="resetPro">重置</el-button>
      </common-form>
      <div>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="addDialog">新增</el-button>
        <!-- <el-button type="success" icon="el-icon-edit" size="mini">修改</el-button> -->
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="disAbled"
          @click="delSelect"
        >删除</el-button>
        <!-- 导出 excel 表格 -->
        <!-- <el-popover placement="top" width="200" style="margin-left:10px;">
          <p style="font-size:13px;">
            <i class="el-icon-s-opportunity" style="color: green;"></i> 请选择你所需要导出的类型！
          </p>
          <div  style="text-align: right; margin: 0">
            <export-excel
              type="info"
              :excelData="allSelection"
              :excelTitle="excelTitle"
              :excelHeader="excelHeader"
            >全部</export-excel>
            <export-excel
              type="success"
              :excelData="multipleSelection"
              :excelTitle="excelTitle"
              :excelHeader="excelHeader"
              :excelVal="excelVal"
            >选中项</export-excel>
          </div>
          <el-button slot="reference" type="warning" size="mini" icon="el-icon-s-data" @click="exlAll()">导出</el-button>
        </el-popover>-->
      </div>
      <common-table
        :tableData="goodsTable"
        :tableLabel="goodsTableLabel"
        :config="config"
        @changeSize="changeSize"
        @changeCurrent="changeCurrent"
        @changeStatus="changeStatus"
        @changeSelect="changeSelect"
        @del="delCate"
        @edit="eidtDialog"
        @detail="detailDialog"
      ></common-table>
      <!-- 添加商品 -->
      <el-dialog title="添加商品" width="40%" :visible.sync="dialogVisible" @close="closeaddDialog">
        <el-form :model="addForm" :rules="addrules" ref="addForm">
          <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="addForm.name"></el-input>
          </el-form-item>
          <el-form-item label="商品分类" :label-width="formLabelWidth" prop="categoryId">
            <el-select v-model="addForm.categoryId" placeholder="请选择商品类型">
              <el-option
                v-for="cate in categoryarr"
                :label="cate.label"
                :value="cate.value"
                :key="cate.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格" :label-width="formLabelWidth" prop="price">
            <el-input v-model.number="addForm.price"></el-input>
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth" prop="stock">
            <el-input v-model.number="addForm.stock"></el-input>
          </el-form-item>
          <el-form-item label="商品副标题" :label-width="formLabelWidth">
            <el-input v-model="addForm.subtitle"></el-input>
          </el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="success" @click="resetForm('addForm')">重置</el-button>
          <el-button type="primary" @click="submitaddForm('addForm')">提交修改</el-button>
        </el-form>
      </el-dialog>
      <!-- 商品详情 -->
      <el-dialog title="商品详情" width="60%" :visible.sync="detailDialogVisible">
        <div class="Detailbody">
          <div class="Detail">
            <div class="Detailprice">
              <h1>{{selectDetail.name}}</h1>
              <span>价格：￥{{selectDetail.price}}</span>
              <span>库存：{{selectDetail.stock}}</span>
            </div>
            <div class="Detailimage clearfix">
              <span style="fontSize:18px">商品图片</span>
              <ul class="Detailimageul clearfix">
                <li v-for="(item,index) in selectDetail.subImages" :key="index">
                  <img :src="imgUrl+item" alt="图片未上传" width="100px" />
                </li>
              </ul>
            </div>
            <div class>
              <span style="fontSize:18px">商品详情图</span>
              <ul class="Detailimageul">
                <li v-for="(item,index) in selectDetail.detail" :key="index">
                  <img :src="imgUrl+item" alt="图片未上传" width="100%" />
                </li>
              </ul>
            </div>
            <div class="Detailvideo">
              <span>商品视频</span>
              <div v-if="selectDetail.videoUrl==''||selectDetail.videoUrl==null">
                没有视频上传
                <!-- poster="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1597030261&di=4a301032394be7eb31bc7e60bf85f846&src=http://01.minipic.eastday.com/20170113/20170113174441_4a700387e67e0119e06a111ee2292bf7_10.jpeg" -->
              </div>
              <div v-if="selectDetail.videoUrl!==''&&selectDetail.videoUrl!==null">
                <video
                  width="100%"
                  height="360"
                  :src="imgUrl+selectDetail.videoUrl"
                  type="video/mp4"
                  id="player1"
                  controls="controls"
                  preload="none"
                ></video>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="商品编辑" width="60%" :visible.sync="EditDialogVisible">
        <el-form :model="editForm" :rules="addrules" ref="editForm">
          <el-form-item label="商品名称" :label-width="formLabelWidth" prop="name">
            <el-input v-model="editForm.name">{{editForm.name}}</el-input>
          </el-form-item>
          <el-form-item label="商品分类" :label-width="formLabelWidth" prop="categoryId">
            <el-select v-model="editForm.categoryId">
              <el-option
                v-for="cate in categoryarr"
                :label="cate.label"
                :value="cate.id"
                :key="cate.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品价格" :label-width="formLabelWidth" prop="price">
            <el-input v-model.number="editForm.price">{{editForm.price}}</el-input>
          </el-form-item>
          <el-form-item label="商品库存" :label-width="formLabelWidth" prop="stock">
            <el-input v-model.number="editForm.stock">{{editForm.stock}}</el-input>
          </el-form-item>
          <el-form-item label="商品副标题" :label-width="formLabelWidth" prop="subtitle">
            <el-input v-model="editForm.subtitle">{{editForm.subtitle}}</el-input>
          </el-form-item>
          <el-button @click="EditDialogVisible = false">取 消</el-button>
          <el-button type="success" @click="resetForm('editForm')">重置</el-button>
          <el-button type="primary" @click="submiteditForm('editForm')">确 定</el-button>
          <el-button type="info" @click="innerimgVisible = true">点击进入图像编辑</el-button>
        </el-form>
        <el-dialog width="60%" title="图像编辑" :visible.sync="innerimgVisible" append-to-body>
          <div class="imgDialog">
            <div class="imageDialogDetail">
              <div class="subimg">
                <span>商品图片区</span>
                <div class="imgbox">
                  <div
                    class="imgli"
                    v-for="(item,key,index) in selectDetail.subImages"
                    :key="index"
                  >
                    <img :src="imgUrl+item" alt="图片丢失" width="100px" />
                    <el-button type="danger" @click="removeimg(key)">删除该图片</el-button>
                  </div>
                </div>
              </div>
              <div class="subimg">
                <span>商品详情区</span>
                <div class="imgbox">
                  <div class="imgli" v-for="(item,key,index) in selectDetail.detail" :key="index">
                    <img :src="imgUrl+item" alt="图片丢失" width="100px" height="100px" />
                    <el-button type="danger" @click="removedetailimg(key)">删除该图片</el-button>
                  </div>
                </div>
              </div>
              <div class="addimage">
                <span>图片上传</span>
                <div>
                  <!-- <input
                    type="file"
                    multiple="multiple"
                    accept="image/*"
                    @change="handleFile"
                    class="hiddenInput"
                  />-->
                  <input type="file" accept="image/*"  @change="handleFile" class="hiddenInput">
                </div>
              </div>
            </div>
          </div>
        </el-dialog>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import CommonForm from '../../components/CommonForm'
import CommonTable from '../../components/CommonTable'
// import ExportExcel from '../../components/ExportExcel'

export default {
  components: {
    CommonForm,
    CommonTable
    // ExportExcel
  },
  data () {
    return {
      imgUrl: 'https://phone-shop.oss-cn-beijing.aliyuncs.com/',
      addrules: {
        name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        categoryId: [{ required: true, message: '请输入商品名称' }],
        price: [
          { required: true, message: '请输入商品价格', trigger: 'blur' },
          { type: 'number', message: '必须是数字' }
        ],
        stock: [
          { required: true, message: '请输入商品库存' },
          { type: 'number', message: '必须是数字' }
        ],
        subtitle: [
          { required: true, message: '请输入副标题', trigger: 'blur' }
        ]
      },
      // 搜索表单
      searchForm: {
        name: '',
        category: '',
        status: '',
        date: ''
      },
      // 搜索表单label
      searchFormLabel: [
        {
          model: 'name',
          label: '商品名',
          type: 'input'
        },
        {
          model: 'category',
          label: '类别',
          type: 'select',
          opts: []
        },
        {
          model: 'status',
          label: '状态',
          type: 'select',
          opts: [
            {
              value: '',
              label: '全部'
            },
            {
              value: 1,
              label: '正常'
            },
            {
              value: 2,
              label: '下架'
            }
          ]
        },
        {
          model: 'date',
          label: '时间',
          type: 'date'
        }
      ],
      goodsTable: [],
      goodsTableLabel: [
        {
          prop: 'image',
          label: '图片',
          type: 'image'
        },
        {
          prop: 'name',
          label: '商品名'
        },
        {
          prop: 'category',
          label: '类别'
        },
        {
          prop: 'status',
          label: '状态',
          type: 'switch'
        },
        {
          prop: 'price',
          label: '价格'
        }
      ],
      // 添加商品参数
      addForm: {
        categoryId: '',
        name: '',
        price: '',
        stock: '',
        subtitle: ''
      },
      // 编辑商品参数
      editForm: {
        categoryId: '',
        name: '',
        id: '',
        price: '',
        stock: '',
        subtitle: ''
      },
      // 所有分类
      categoryarr: [],
      addFormLabel: [
        {
          model: 'code',
          label: '状态',
          type: 'select',
          opts: [
            {
              value: '1',
              label: '正常'
            },
            {
              value: '2',
              label: '弃用'
            }
          ]
        },
        {
          model: 'name',
          label: '分类名',
          type: 'input'
        }
      ],
      // table配置对象
      config: {
        loading: false,
        current: 0,
        size: 0,
        total: 0,
        btn: [
          {
            type: 'detail'
          },
          {
            type: 'edit'
          },
          {
            type: 'delete'
          }
        ]
      },
      // 选中商品的详情
      selectDetail: {},

      // 请求页面参数
      pageConfig: {
        name: '',
        categoryName: '',
        status: '',
        leftTime: '',
        rightTime: '',
        condition: '',
        current: 1,
        size: 5
      },
      // 控制按钮是否可用
      disAbled: true,
      // 选中表格数据返回数组
      multipleSelection: [],
      // 导出表格的所有数据缓存
      allSelection: [],
      // 自定义导出 excel 表头
      excelHeader: [
        '商品名',
        '分类',
        '图片地址',
        '库存',
        '价格',
        '状态',
        '创建时间',
        '更新时间',
        '视频地址'
      ],
      // 自定义导出 excel 字段
      excelVal: [
        'name',
        'category',
        'subImages',
        'stock',
        'price',
        'statusLabel',
        'createTime',
        'updateTime',
        'videoUrl'
      ],
      // 自定义导出 excel 文件名
      excelTitle: '商品信息',
      // 添加弹框
      dialogVisible: false,
      // 详情弹框
      detailDialogVisible: false,
      // 图像弹框
      innerimgVisible: false,
      // 编辑
      EditDialogVisible: false,
      formLabelWidth: '100px',
      attachname: 'attach',
      count: 1
    }
  },
  methods: {
    // 获取商品列表
    async getProList () {
      this.config.loading = true
      const { data: res } = await this.$http.post(
        '/product/page',
        this.pageConfig
      )
      // console.log('商品分类', res)
      if (res.code !== 200) {
        this.config.loading = false
        return this.$message.error('获取商品列表失败！')
      }
      // 商品列表赋值
      const result = res.data
      console.log('result', result)

      this.goodsTable = result.list.map((item) => {
        var subImage = JSON.parse(item.product.subImages)
        if (subImage) {
          for (const k in subImage) {
            item.product.image = this.imgUrl + subImage[k]
            break
          }
          console.log('img', subImage)
          // item.product.image = this.imgUrl + subImage.big_0
        } else {
          // item.product.image = require('../../assets/images/imagelose.jpg')
          item.product.image = ''
        }
        console.log('img', item)

        item.product.category = item.categoryName
        if (item.product.status === 1) {
          item.product.status = true
        } else {
          item.product.status = false
        }
        return item.product
      })
      // console.log(this.goodsTable)
      this.config.total = result.total
      this.config.current = result.current
      this.config.size = result.size
      this.config.loading = false
    },
    changeSize (size) {
      //   console.log(`每页${size}条`)
      this.pageConfig.size = size
      this.getProList()
    },
    changeCurrent (current) {
      //   console.log(`当前页：${current}`)
      this.pageConfig.current = current
      this.getProList()
    },
    // 改变状态
    async changeStatus (row) {
      const { data: res } = await this.$http(
        `/product/update-status/${row.id}/${row.status ? 1 : 2}`
      )
      // console.log('改变status', res)
      if (res.code !== 200) {
        return this.$message.error('状态改变失败！')
      }
      this.$message.success('状态改变成功！')
      this.getProList()
    },
    // 删除商品
    delCate (row) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const { data: res } = await this.$http.get(
            `/product/delete/${row.id}`
          )
          if (res.code !== 200) {
            return this.$message.error('删除商品失败！')
          }
          this.$message.success('删除商品成功！')
          this.getProList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 选中商品的详情
    detailDialog (row) {
      this.selectDetail = row
      var subImages = ''
      var detail = ''
      if (typeof row.subImages === 'string') {
        subImages = JSON.parse(row.subImages)
      } else {
        subImages = row.subImages
      }
      if (typeof row.detail === 'string') {
        detail = JSON.parse(row.detail)
      } else {
        detail = row.detail
      }
      if (!subImages) {
        this.selectDetail.subImages = ''
      }
      if (!detail) {
        this.selectDetail.detail = ''
      }
      this.selectDetail.subImages = subImages
      this.selectDetail.detail = detail
      console.log(this.selectDetail.videoUrl)
      console.log(this.selectDetail)
      this.detailDialogVisible = true
    },
    changeSelect (val) {
      this.multipleSelection = val.map((item) => {
        item.statusLabel = item.status === true ? '正常' : '下架'
        return item
      })
      // console.log(this.multipleSelection)
      // 如果选择数据大于 0 则固定按钮可使用
      if (this.multipleSelection.length > 0) {
        this.disAbled = false
      } else {
        this.disAbled = true
      }
    },
    // 删除选中项
    delSelect () {
      this.$confirm(
        `此操作将永久删除 ${this.multipleSelection.length} 条分类, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          // 获取id数组
          var delArr = this.multipleSelection.map((item) => {
            return item.id
          })
          for (var i in delArr) {
            var id = Number(delArr[i])
            // console.log(id)
            const { data: res } = await this.$http.get(`/product/delete/${id}`)
            // console.log(res)
            if (res.code !== 200) {
              return this.$message.error('删除分类失败！')
            }
          }
          // console.log(this.goodsTable)

          // console.log(this.goodsTable)
          this.$message.success(`已成功删除${delArr.length}条成功！`)
          this.getProList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 获取分类
    async getCatearr () {
      const { data: res } = await this.$http('/category/all')
      if (res.code !== 200) {
        return this.$message.error('获取商品分类列表失败！')
      }
      // 商品列表赋值
      const result = res.data
      // console.log('所有商品分类', result)
      // console.log(this.searchFormLabel[1].opts)
      const catelist = result.map((item, index) => {
        item.value = item.name
        item.label = item.name
        return item
      })

      this.searchFormLabel[1].opts = catelist
      // this.categoryarr = catelist
      const all = { value: '', label: '全部' }
      this.searchFormLabel[1].opts.push(all)
      for (var i = 0; i < this.searchFormLabel[1].opts.length - 1; i++) {
        this.categoryarr.push(this.searchFormLabel[1].opts[i])
      }
      console.log('分类数据', this.categoryarr)
    },
    // 搜索商品
    searchPro () {
      var form = this.$refs.searchFormRef.form
      this.pageConfig.name = form.name
      if (form.status !== '') {
        this.pageConfig.status = form.status
      } else {
        this.pageConfig.status = ''
      }
      if (form.category !== '') {
        this.pageConfig.categoryName = form.category
      } else {
        this.pageConfig.categoryName = ''
      }
      if (form.date) {
        this.pageConfig.leftTime = form.date[0]
        this.pageConfig.rightTime = form.date[1]
        this.pageConfig.condition = 0
      } else {
        this.pageConfig.leftTime = this.pageConfig.rightTime = this.pageConfig.condition =
          ''
      }
      console.log(form)
      console.log(this.pageConfig)
      this.getProList()
    },
    // 重置表单数据
    resetPro () {
      // this.searchForm = this.$refs.searchFormRef.form
      for (const key in this.pageConfig) {
        if (key !== 'current' && key !== 'size') {
          this.pageConfig[key] = ''
        }
      }
      for (const key in this.searchForm) {
        this.searchForm[key] = ''
      }
      this.getProList()
    },
    // 重置弹出框数据
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 提交新增商品
    submitaddForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(this.addForm)
          const { data: res } = await this.$http.post(
            '/product/insert',
            this.addForm
          )
          console.log('添加商品', res)
          if (res.code !== 200) {
            return this.$message.error('添加商品失败！')
          }
          this.$message.success('添加商品成功！')
          this.getProList()
          this.dialogVisible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 提交修改商品
    submiteditForm (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          console.log(this.editForm)
          const { data: res } = await this.$http.post(
            '/product/update',
            this.editForm
          )
          console.log('修改商品', res)
          if (res.code !== 200) {
            return this.$message.error('修改商品失败！')
          }
          this.$message.success('修改成功！')
          this.getProList()
          this.EditDialogVisible = false
        } else {
          return false
        }
      })
    },
    // 关闭对话框
    closeaddDialog () {
      for (const key in this.addForm) {
        this.addForm[key] = ''
      }
      this.resetForm('addForm')
    },
    // 添加弹出框
    addDialog () {
      this.dialogVisible = true
    },
    // 编辑弹出框
    eidtDialog (row) {
      this.editForm.id = row.id
      console.log(row)
      this.editForm.name = row.name
      this.editForm.categoryId = row.categoryId
      this.editForm.price = row.price
      this.editForm.stock = row.stock
      this.editForm.subtitle = row.subtitle
      this.selectDetail = row
      var subImages = ''
      var detail = ''
      if (typeof row.subImages === 'string') {
        subImages = JSON.parse(row.subImages)
      } else {
        subImages = row.subImages
      }
      if (typeof row.detail === 'string') {
        detail = JSON.parse(row.detail)
      } else {
        detail = row.detail
      }
      if (!subImages) {
        this.selectDetail.subImages = ''
      }
      if (!detail) {
        this.selectDetail.detail = ''
      }
      this.selectDetail.subImages = subImages
      this.selectDetail.detail = detail
      this.EditDialogVisible = true
    },
    // 删除图片
    async removeimg (key) {
      var id = this.selectDetail.id
      const { data: res } = await this.$http('/product/delete-image', {
        params: {
          key: key,
          id: id
        }
      })
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('删除图片' + key + '失败！')
      }
      this.$message.success('删除图片' + key + '成功！')
      this.innerimgVisible = false
      this.EditDialogVisible = false
      this.getProList()
    },
    async removedetailimg (key) {
      var id = this.selectDetail.id
      const { data: res } = await this.$http('/product/delete-detail', {
        params: {
          key: key,
          id: id
        }
      })
      console.log(res)
      if (res.code !== 200) {
        return this.$message.error('删除图片' + key + '失败！')
      }
      this.$message.success('删除图片' + key + '成功！')
      this.innerimgVisible = false
      this.EditDialogVisible = false
      this.getProList()
    },
    async fileUpload (param) {
      var filiObj = param.file
      // console.log(typeof filiObj)
      console.log(filiObj)
      var form = new FormData()
      form.append('file', filiObj)
      try {
        const { data: res } = await this.$http.post(
          `/product/${this.selectDetail.id}/images`,
          form
        )
        console.log(res)
        this.getProList()
        return this.$message.success('上传成功')
      } catch (e) {
        return this.$message.success('您没有权限更改！')
      }
    },
    submitUpload () {
      console.log(this.$refs.upload)
      this.$refs.upload.submit()
    },
    beforeRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePreview (file) {
      console.log(file)
    },
    // 导出全部
    async exlAll () {
      var queryInfo = {
        name: '',
        status: '',
        categoryName: '',
        leftTime: '',
        rightTime: '',
        condition: '',
        current: 1,
        size: this.config.total
      }
      // console.log(this.config.total)
      this.config.loading = true
      const { data: res } = await this.$http.post('/product/page', queryInfo)
      if (res.code !== 200) {
        this.config.loading = false
        return this.$message.error('获取商品列表失败！')
      }
      // 商品列表赋值
      const result = res.data
      console.log(result.list)
      this.allSelection = result.list.map((item) => {
        item.product.statusLabel = item.product.status === 1 ? '正常' : '下架'
        this.config.loading = false
        return item.product
      })
      // console.log(this.allSelection)
    },
    // 图片上传
    async handleFile (e) {
      const $target = e.target || e.srcElement
      const file = $target.files[0]
      var reader = new FileReader()
      reader.onload = (data) => {
        const res = data.target || data.srcElement

        this.userImg = res.result
      }
      reader.readAsDataURL(file)

      console.log(typeof file)
      // 上传头像
      const formData = new FormData()
      formData.set('file', file)
      const { data: res } = await this.$http.post(
        `/product/${this.selectDetail.id}/images`,
        formData,
        { headers: { 'Content-type': 'multipart/form-data' } }
      )
      console.log('上传图片:', res)
      if (res.code === 200) {
        this.$message.success('上传图片成功！')
      }
    }
  },
  created () {
    this.getProList()
    this.getCatearr()
  }
}
</script>

<style lang="scss" scoped>
.el-form-item {
  margin-right: 0 auto;
  width: 90%;
}
.Detailbody {
  overflow: hidden;
  position: relative;
  height: 500px;
}
.Detail {
  position: absolute;
  height: 500px;
  top: 0;
  left: 0;
  overflow-y: scroll;
  right: -17px;
  .Detailprice {
    span {
      font-size: 20px;
      color: #f90;
      padding: 10px 10px 10px 0;
    }
  }
  .Detailimage {
    margin-top: 10px;
  }
  .Detailvideo {
    width: 90%;
    span {
      display: block;
      font-size: 18px;
      padding-bottom: 10px;
    }
  }
}
.Detailimageul {
  list-style: none;
  width: 90%;
  li {
    float: left;
    border: 1px solid #eee;
    margin: 10px 10px 0 0;
    padding: 5px;
  }
}
.imgDialog {
  overflow: hidden;
  position: relative;
  height: 500px;
  .imageDialogDetail {
    position: absolute;
    height: 500px;
    top: 0;
    left: 0;
    overflow-y: scroll;
    right: -17px;
    span {
      font-size: 20px;
      color: #f90;
    }
    .imgbox {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      .imgli {
        display: flex;
        flex-direction: column;

        padding: 10px;
        .el-button {
          padding: 0;
          margin-top: 10px;
        }
      }
    }
  }
}
.clearfix:after {
  content: "";

  display: block;
  clear: both;
  padding-top: 20px;
}
</style>
